import { Pointer } from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change
 * @param {Function} isEdit
 * @param {Object } other 其他属性
 * @description 表格 select 框
 */
export const renderRowInput = (
  scope: any,
  prop: string,
  placeholder: string,
  change: Function,
  isEdit: Function,
  other?: { changeInput?: (row: any) => void }
) => {
  return (
    <div>
      {scope.row?.isAddFlag === "true" || scope.row["edit"] === scope.column?.label ? (
        <el-input
          class="table-change-box"
          id={prop}
          placeholder={placeholder}
          v-model={scope.row[prop]}
          onBlur={() => {
            change && scope.row["edit"] && change(scope.row);
          }}
          onInput={() => other?.changeInput && other.changeInput(scope.row)}
        ></el-input>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;

            nextTick(() => {
              setTimeout(() => {
                let inputBox: any = document.querySelector("#" + prop);
                inputBox?.focus();
              }, 200);
            });
          }}
        >
          {scope.row[prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change
 * @param {Function} isEdit
 * @param {Object } other 其他属性
 * @description 表格 select 框
 */
export const renderSelectPopUp = (scope: any, prop: string, placeholder: string, openPopup: Function, isEdit: Function) => {
  return (
    <div>
      {scope.row?.isAddFlag === "true" || scope.row["edit"] === scope.column?.label ? (
        <div class="flx-align-center" onClick={() => openPopup(scope.row)}>
          <el-input
            class="table-change-box2"
            readonly={true}
            id={prop}
            placeholder={placeholder}
            v-model={scope.row[prop]}
          ></el-input>
          <div class="table-change-box2-icon">
            <el-icon>
              <Pointer />
            </el-icon>
          </div>
        </div>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;
            nextTick(() => {
              openPopup(scope.row);
            });
          }}
        >
          {scope.row[prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} childrenProp 下拉框选择项字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change 值修改的方法
 * @param {getOptions} getOptions 获取下拉框内容
 * @param {string} label 显示内容
 * @param {Function} isEdit 是否可编辑
 * @description 表格 select 框
 */
export const renderRowSelect = (
  scope: any,
  prop: string,
  childrenProp: string,
  placeholder: string,
  change: Function,
  getOptions: (params: any) => void,
  label?: string,
  isEdit?: Function
) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-select
          class="table-change-box"
          id={prop}
          v-model={scope.row[prop]}
          filterable
          clearable
          placeholder={placeholder}
          onChange={() => {
            change && scope.row["edit"] && change();
          }}
          onBlur={() => {
            change && scope.row["edit"] && change();
          }}
        >
          {(scope.row[childrenProp] || []).map((item: any) => (
            <el-option value={item.value} label={item.label} />
          ))}
        </el-select>
      ) : (
        <div
          class="table-row-box"
          onDblclick={async () => {
            if (isEdit && !isEdit(scope.row)) return;
            getOptions && (await getOptions(scope.row));
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector("#" + prop);
              inputBox?.focus();
            }, 200);
          }}
        >
          {scope.row[label || prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} childrenProp 下拉框选择项字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change 绑定的change方法
 * @param {Function} getOptions 获取选项值
 * @param {Function} isEdit 是否可编辑
 * @description 表格 级联选择器
 */
export const renderCascader = (
  scope: any,
  prop: string,
  childrenProp: string,
  placeholder: string,
  change: Function,
  getOptions: (params: any) => void,
  label: string,
  isEdit: Function
) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <div id={prop}>
          <el-cascader
            class="table-change-box"
            v-model={scope.row[prop]}
            options={scope.row[childrenProp] || []}
            placeholder={placeholder}
            filterable
            onChange={() => {
              change && scope.row["edit"] && change();
            }}
          ></el-cascader>
        </div>
      ) : (
        <div
          class="table-row-box"
          onDblclick={async () => {
            if (!isEdit(scope.row)) return;
            getOptions && (await getOptions(scope.row));
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector(`#${prop} input`);
              inputBox?.focus();
            }, 200);
          }}
        >
          {scope.row[label || prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @description: 表格日期选择器
 * @param {any} scope
 * @param {string} prop
 * @param {string} placeholder
 * @param {Function} change
 * @param {Function} isEdit 是否可编辑
 * @return {*}
 */

export const renderRowDate = (scope: any, prop: string, placeholder: string, change: Function, isEdit: Function) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-date-picker
          class="table-change-box"
          id={prop}
          placeholder={placeholder}
          v-model={scope.row[prop]}
          value-format="YYYY-MM-DD"
          onChange={() => change && scope.row["edit"] && change(scope.row)}
          onBlur={() => {
            change && scope.row["edit"] && change();
          }}
        ></el-date-picker>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector("#" + prop);
              inputBox?.focus();
            }, 200);
          }}
        >
          {scope.row[prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @description: 表格日期时间选择器
 * @param {any} scope
 * @param {string} prop
 * @param {string} placeholder
 * @param {Function} change
 * @param {Function} isEdit 是否可编辑
 * @return {*}
 */

export const renderRowDateTime = (scope: any, prop: string, placeholder: string, change: Function, isEdit: Function) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-date-picker
          id={prop}
          class="table-change-box"
          placeholder={placeholder}
          v-model={scope.row[prop]}
          type="datetime"
          value-format="YYYY-MM-DD HH:mm"
          format="YYYY-MM-DD HH:mm"
          onChange={() => change && scope.row["edit"] && change(scope.row)}
          onBlur={() => {
            change && scope.row["edit"] && change();
          }}
        ></el-date-picker>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector("#" + prop);
              inputBox?.focus();
            }, 200);
          }}
        >
          {scope.row[prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @description: 多选框组
 * @param {any} scope
 * @param {string} prop
 * @param {Array} children
 * @param {isEdit} onChange
 * @return {*}
 */
export const renderCheckbox = (scope: any, prop: string, children: Array<string | number>, isEdit: Function) => {
  return (
    <div class="table-check-box">
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-checkbox-group v-model={scope.row[prop]} class="table-change-box">
          {(children || []).map((item: any) => (
            <el-checkbox label={item} />
          ))}
        </el-checkbox-group>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;
          }}
        >
          <el-checkbox-group v-model={scope.row[prop]}>
            {(children || []).map((item: any) => (
              <el-checkbox label={item} disabled />
            ))}
          </el-checkbox-group>
        </div>
      )}
    </div>
  );
};

/**
 * @description: 时间范围
 * @param {any} scope
 * @param {string} prop
 * @param {Array} children
 * @param {isEdit} onChange
 * @return {*}
 */
export const renderTimeSelect = (
  scope: any,
  prop: string,
  placeholder: string,
  change: Function,
  isEdit: Function,
  other?: { start: ""; end: ""; step: "" }
) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-time-select
          id={prop}
          class="table-check-box"
          v-model={scope.row[prop]}
          placeholder={placeholder}
          start={other?.start || "07:00"}
          step={other?.step || "00:30"}
          end={other?.end || "23:00"}
          onChange={() => change && scope.row["edit"] && change(scope.row)}
          onBlur={() => {
            change && scope.row["edit"] && change();
          }}
        />
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector("#" + prop);
              inputBox?.focus();
            }, 200);
          }}
        >
          {scope.row[prop]}
        </div>
      )}
    </div>
  );
};

/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change
 * @param {Function} isEdit
 * @param {Object } other 其他属性
 * @description 表格 显示icon图标框
 */
export const renderDisplayIcon = (
  scope: any,
  prop: string,
  placeholder: string,
  change: Function,
  isEdit: Function,
  other?: { changeInput?: (row: any) => void }
) => {
  return (
    <div>
      {scope.row?.isAddFlag === "true" || scope.row["edit"] === scope.column?.label ? (
        <el-input
          class="table-change-box"
          id={prop}
          placeholder={placeholder}
          v-model={scope.row[prop]}
          onBlur={() => {
            change && scope.row["edit"] && change(scope.row);
          }}
          onInput={() => other?.changeInput && other.changeInput(scope.row)}
        ></el-input>
      ) : (
        <div
          class="table-row-box"
          onDblclick={() => {
            if (!isEdit(scope.row)) return;
            scope.row["edit"] = scope.column.label;

            nextTick(() => {
              setTimeout(() => {
                let inputBox: any = document.querySelector("#" + prop);
                inputBox?.focus();
              }, 200);
            });
          }}
        >
          <SvgIcon class="mr5 icon" name={scope.row[prop]}></SvgIcon>
        </div>
      )}
    </div>
  );
};

/**
 * @param {Object} scope 表格行数据
 * @param {string} prop 绑定的字段
 * @param {string} childrenProp 下拉框选择项字段
 * @param {string} placeholder 提示占位符
 * @param {Function} change 值修改的方法
 * @param {getOptions} getOptions 获取下拉框内容
 * @param {string} label 显示内容
 * @param {Function} isEdit 是否可编辑
 * @description 表格 select 图标框
 */
export const renderRowSelectIcon = (
  scope: any,
  prop: string,
  childrenProp: string,
  placeholder: string,
  change: Function,
  getOptions: (params: any) => void,
  label?: string,
  isEdit?: Function
) => {
  return (
    <div>
      {scope.row.isAddFlag === "true" || scope.row["edit"] === scope.column.label ? (
        <el-select
          class="table-change-box"
          id={prop}
          v-model={scope.row[prop]}
          filterable
          placeholder={placeholder}
          onChange={() => {
            change && scope.row["edit"] && change();
          }}
          onBlur={() => {
            change && scope.row["edit"] && change();
          }}
        >
          {(scope.row[childrenProp] || []).map((item: any) => (
            <el-option value={item.value} label={item.label}>
              <span class="ml5">{item.label}</span> | <SvgIcon class="mr5 icon" name={item.value}></SvgIcon>
            </el-option>
          ))}
        </el-select>
      ) : (
        <div
          class="table-row-box"
          onDblclick={async () => {
            if (isEdit && !isEdit(scope.row)) return;
            getOptions && (await getOptions(scope.row));
            scope.row["edit"] = scope.column.label;
            setTimeout(() => {
              let inputBox: any = document.querySelector("#" + prop);
              inputBox?.focus();
            }, 200);
          }}
        >
          <SvgIcon class="mr5 icon" name={scope.row[label || prop]}></SvgIcon>
        </div>
      )}
    </div>
  );
};
